<template>
  <view class="container">
    <view class="head">
      <view class="headbox">
        <view @click="toSafety" class="headbox_list">
          <uni-badge class="headbadge" :text="dangerValue" absolute="rightTop" size="small">
            <image src="/static/images/ico_danger.png" alt="">
            <view>安全隐患</view>
          </uni-badge>
        </view>
        <view @click="toPatrolPage" class="headbox_list">
          <uni-badge class="headbadge" :text="recordValue" absolute="rightTop" size="small">
            <image src="/static/images/ico_record.png" alt="">
            <view>检查记录</view>
          </uni-badge>
        </view>
        <view @click="toBacklog" class="headbox_list">
          <uni-badge class="headbadge" :text="backlogValue" absolute="rightTop" size="small">
            <image src="/static/images/ico_backlog.png" alt="">
            <view>待办事项</view>
          </uni-badge>
        </view>
      </view>
    </view>
    <view class="regimen">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">水情监测</div>
      </view>
      <view class="regimenBox boxshow">
        <view class="regimen_top">
          <view class="regimen_txt">
            <text>水位：</text>
            <view>{{ waterInfo.rz || 0 }}</view>
            <text>m</text>
          </view>
          <view class="regimen_txt">
            <text>入库流量：</text>
            <view>{{ waterInfo.inq || 0 }}</view>
            <text>m³/s</text>
          </view>
          <view class="regimen_txt">
            <text>库容：</text>
            <view>{{ waterInfo.w || 0 }}</view>
            <text>m³</text>
          </view>
        </view>
        <view class="regimen_bot">
          <view class="regimen_bot_box">
            <image src="/static/images/index/ico_regimen1.png" alt="">
            <view class="regimen_num">{{ Number(raininfo.rainFall || 0).toFixed(2) }}</view>
            <view class="regimen_name">距汛限纳雨量（mm）</view>
          </view>
          <view class="regimen_bot_box">
            <image src="/static/images/index/ico_regimen2.png" alt="">
            <view class="regimen_num">{{ Number(raininfo.drp24 || 0).toFixed(2) }}</view>
            <view class="regimen_name">24h降雨<br />（mm）</view>
          </view>
          <view class="regimen_bot_box">
            <image src="/static/images/index/ico_regimen3.png" alt="">
            <view class="regimen_num">{{ Number(raininfo.drp72 || 0).toFixed(2) }}</view>
            <view class="regimen_name">三天降雨<br />（mm）</view>
          </view>
          <view class="regimen_bot_box">
            <image src="/static/images/index/ico_regimen4.png" alt="">
            <view class="regimen_num">{{ Number(raininfo.sumQc || 0).toFixed(2) }}</view>
            <view class="regimen_name">三天来水<br />（万m³）</view>
          </view>
        </view>
      </view>
    </view>
    <view class="rain">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">雨情监测</div>
      </view>
      <view class="rainBox boxshow">
        <view class="charts-box">
          <qiun-data-charts v-if="isChart"  type="area" :opts="opts" :chartData="chartData" />
        </view>
      </view>
    </view>
    <view class="safe">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">安全管理</div>
      </view>
      <view class="safebox">
        <view v-for="(item, index) in safelist" :key="index" class="safeList boxshow" @click="callPhone(item.phone)">
          <view class="safe_left">
            <image :src="'/static/images/index/img_safe'+ (index+1) + '.png'" alt="">
          </view>
          <view class="safe_right">
            <view class="safe_duties">{{ item.personType }}</view>
            <view class="safe_info">
              <view>{{ item.name }}</view>
              <view>{{ item.unit }}</view>
              <view>
                <image src="/static/images/index/ico_phone.png" alt="">
                <text>{{ item.phone }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="osmotic">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">渗压监测</div>
      </view>
      <view class="osmoticbox">
        <view @click="toOsmotic('异常')" class="osmotic_left osmotic_box">
          <view class="osmotic_title">渗压异常</view>
          <view class="osmotic_subtitle">查看详情<!-- 较上月持平 --></view>
          <view class="osmotic_num">{{ osmoticAbnormal }}</view>
          <image src="/static/images/index/btn_osmotic.png" alt="">
        </view>
        <view @click="toOsmotic('正常')" class="osmotic_right osmotic_box">
          <view class="osmotic_title">渗压正常</view>
          <view class="osmotic_subtitle">查看详情<!-- 较上月持平 --></view>
          <view class="osmotic_num">{{ osmoticNormal }}</view>
          <image src="/static/images/index/btn_osmotic.png" alt="">
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import dayjs from "../../utlis/dayjs.min";

  export default {
    // 点击导航栏左右按钮
    onNavigationBarButtonTap(e) {
      if(e.index == 0) {}
    },
    data() {
      return {
        token: '',
        dangerValue: 0,
        recordValue: 0,
        backlogValue: 0,
        chartData: {},
        isChart: false,
        opts: {
          color: ["#5D8FF6"],
          padding: [15,15,5,10],
          enableScroll: false,
          dataPointShape: false,
          legend: {
            show: false,
          },
          xAxis: {
            disableGrid: true,
            fontColor: '#808080',
            axisLineColor: '#808080',
            fontSize: 12,
          },
          yAxis: {
            showTitle: true,
            gridType: "dash",
            dashLength: 2,
            gridColor: '#E6E6E6',
            data: [{
              title: "mm",
              fontColor: '#808080',
              axisLineColor: '#808080',
              fontSize: 12,
            }]
          },
          extra: {
            area: {
              type: "curve",
              opacity: 0.9,
              addLine: true,
              width: 2,
              gradient: true,
              activeType: "hollow"
            }
          }
        },
        waterInfo: {},
        raininfo: {},
        safelist: [],
        osmoticAbnormal: 0,
        osmoticNormal: 0,
      }
    },
    onLoad() {
      this.token = uni.getStorageSync("token")
    },
    onShow() {
      this.getUserinfo()
      this.getWater()
      this.getRain()
      this.getCadres()
      this.getRains()
      this.getOsmotic()
    },
    methods: {
      // 水情监测
      getWater() {
        this.$request.getrealInfo({ stcd: '41815480' }).then(res => {
          this.waterInfo = res.data || {}
        })
      },
      // 雨情检测
      getRain() {
        let xdata = []
        let sdata = []
        this.$request.queryYLZXX({ stcd: '41815480', count: '7' }).then(res => {
          let dat = res.data || []
          dat.forEach(v => {
            xdata.push((v.idtm).substring(6, 10))
            sdata.push(v.accp)
          })
          setTimeout(() => {
            this.isChart = true
            this.getServerData(xdata, sdata);
          }, 0);
        })
      },
      // 距汛限纳雨量  24h降雨  三天降雨 三天来水
      getRains() {
        uni.request({
          url: 'http://whswszls1.weihai.cn/fapi/v1/result/getForecastResult',
          data: {
            stcd: '41815480',
            startTime: dayjs().format('YYYY-MM-DD HH') + ':00:00'
          },
          success: (res) => {
            this.raininfo = res.data.data || {}
          },
          fail: (err) => {
            this.raininfo = {}
          }
        });
      },
      // 三个责任人
      getCadres() {
        this.$request.getperson().then(res => {
          this.safelist = res.rows || []
        })
      },
      // 检查记录
      toPatrolPage() {
        uni.navigateTo({ url: '/pagesA/patrol/patrol' })
      },
      // 待办事项
      toBacklog() {
        uni.navigateTo({ url: '/pagesA/backlog/index' })
      },
      // 安全隐患
      toSafety() {
        uni.navigateTo({ url: '../../pagesA/alarm/safety' })
      },
      // 雨情 chart图
      getServerData(xdata, sdata) {
        let res = {
          categories: xdata,
          series: [
            {
              name: "降雨量",
              data: sdata,
            },
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      },
      // 检测登录状态
      getUserinfo() {
        if(!this.token) {
          uni.showToast({
            title: "登录过期，请重新登录！",
            icon: "none",
            duration: 2000,
          })
          setTimeout(() => {
            uni.reLaunch({
              url: "../login/index",
            })
          }, 2000)
        }
      },
      // 拨打电话
      callPhone(e) {
        if(e) {
          uni.makePhoneCall({
            phoneNumber: e,
          });
        } else {
          uni.showToast({
            title: '未填写相关信息',
            icon: 'none',
            duration: 2000
          });
        }
      },
      // 获取渗压异常/正常
      getOsmotic() {
        this.$request.selectDam().then(res => {
          this.osmoticAbnormal = res.data.abnormal || 0
          this.osmoticNormal = res.data.just || 0
        })
      },
      // 渗压异常/正常
      toOsmotic(e) {
        uni.navigateTo({
          url: '/pagesA/osmotic/osmotic?remark=' + e
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .head {
    background-image: url('../../static/images/bg_current3.png');
    background-repeat: no-repeat;
    background-size: 100%;
    // background: linear-gradient(to right, #1b68db, #5090ef);
    padding: 10rpx 25rpx;
    height: 180rpx;

    .headbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14rpx 50rpx;
      background-color: #fff;
      border-radius: 12rpx;
      box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .1);

      .headbadge {
        text-align: center;

        image {
          width: 100rpx;
          height: 100rpx;
        }

        view {
          font-size: 28rpx;
          line-height: 28rpx;
          padding-top: 6rpx;
        }
      }
    }
  }

  .topTitle {
    display: flex;
    align-items: center;

    .topTitle_left {
      width: 8rpx;
      height: 28rpx;
      background: #0D91FF;
    }

    .topTitle_right {
      font-size: 32rpx;
      font-weight: bold;
      color: #0D91FF;
      margin-left: 13rpx;
    }
  }
 
  .boxshow {
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .1);
  }

  .regimen {
    padding: 0 25rpx;

    .regimenBox {
      margin-top: 10rpx;
    }
    
    .regimen_top {
      width: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding-top: 12rpx;

      .regimen_txt {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: rgba($color: #000000, $alpha: .5);

        view {
          color: #0D91FF;
          padding-right: 10rpx;
        }
      }
    }

    .regimen_bot {
      padding: 12rpx 25rpx 15rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &_box {
        max-width: 25%;
        text-align: center;

        image {
          width: 108rpx;
          height: 108rpx;
        }

        .regimen_num {
          font-size: 28rpx;
          font-weight: bold;
          color: #0D91FF;
          line-height: 28rpx;
          margin-top: -10rpx;
          padding-bottom: 10rpx;
        }

        .regimen_name {
          font-size: 25rpx;
          color: #716F6F;
          line-height: 25rpx;
          padding-top: 6rpx;
        }
      }
    }
  }

  .rain {
    padding: 0 25rpx;
    margin-top: 20rpx;

    .rainBox {
      margin-top: 10rpx;

      .charts-box {
        width: 100%;
        height: 300rpx;
      }
    }
  }

  .safe {
    padding: 0 25rpx;
    margin-top: 20rpx;

    .safebox {
      margin-top: 10rpx;

      .safeList {
        padding: 15rpx 19rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 13rpx;

        .safe_left {
          width: 70rpx;
          height: 70rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .safe_right {
          width: calc(100% - 110rpx);

          .safe_duties {
            font-size: 28rpx;
            line-height: 28rpx;
            color: #696969;
            padding-bottom: 15rpx;
          }

          .safe_info {
            display: flex;
            align-items: center;
            justify-content: space-between;

            view {
              flex: 2;
              display: flex;
              align-items: center;
              font-size: 28rpx;
              line-height: 28rpx;
              color: #696969;

              &:nth-child(1) {
                flex: 1;
              }

              &:nth-child(2) {
                // white-space: nowrap;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // display: block;
              }

              image {
                width: 20rpx;
                height: 20rpx;
                margin-right: 11rpx;
              }
            }
          }
        }
      }
    }
  }

  .osmotic {
    padding: 0 25rpx 50rpx;
    margin-top: 20rpx;

    .osmoticbox {
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .osmotic_box {
        width: 45%;
        height: 150rpx;
        position: relative;

        .osmotic_title {
          position: absolute;
          top: 6rpx;
          left: 20rpx;
          font-size: 28rpx;
          font-weight: bold;
          color: #fff;
        }

        .osmotic_subtitle {
          position: absolute;
          top: 50rpx;
          left: 100rpx;
          font-size: 24rpx;
          color: #fff;
        }

        .osmotic_num {
          position: absolute;
          top: 96rpx;
          left: 100rpx;
          font-size: 36rpx;
          font-weight: bold;
          color: #fff;
        }

        image {
          position: absolute;
          top: 115rpx;
          right: 30rpx;
          width: 10rpx;
          height: 17rpx;
        }
      }

      .osmotic_left {
        background-image: url('../../static/images/index/img_osmotic1.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .osmotic_right {
        background-image: url('../../static/images/index/img_osmotic2.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
</style>
